<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="app-container">
        <ud-card>

            <div class="myheader">
                <div class="part-left">
                    <el-input v-model="kw" style="border-radius: 100%; width: 250px" size="small" placeholder="输入关键词搜索">
                        <el-button slot="append" icon="el-icon-search" @click="doSearch" />
                    </el-input>
                    <el-button v-if="kw" type="text" size="small" @click="clearKw">清空</el-button>

                    <div class="block" style="margin-left: 10px">
                        <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" size="small" type="daterange"
                            range-separator="至" start-placeholder="选择开始日期" end-placeholder="选择结束日期" />
                    </div>

                    <div class="block" style="margin-left: 10px" >
                        <el-select v-model="status" placeholder="请选择订单状态" clearable size="small">
                            <el-option label="待发货" value="1" />
                            <el-option label="待收货" value="2" />
                            <el-option label="已完成" value="3" />
                            <!-- <el-option label="申请退货" value="4" /> -->
                            <!-- <el-option label="已退货" value="5" />
                            <el-option label="驳回退货申请" value="6" /> -->

                        </el-select>
                    </div>

                </div>
                <div class="part-right">
                    <div class="block">
                        <el-button size="small" icon="el-icon-refresh" @click="loadData">刷新</el-button>
                    </div>
                    <div class="block" v-if="btns.export_score_order">
                        <el-button size="small" icon="el-icon-download" @click="downloadCsv" :loading="downloading" :disabled="downloading"
                            type="primary">导出数据</el-button>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>
            <el-table v-loading="loading" :data="items" size="small" fit highlight-current-row>
                <el-table-column prop="order_no" label="订单号" width="180px"/>
                <el-table-column prop="user_name" label="用户名称" width="100px" />

                <el-table-column prop="expired_at" label="商品信息">
                    <template slot-scope="scope">
                        {{ scope.row.score_goods_info.name }} {{ scope.row.score_goods_info.goods_standards.standards }}
                        × {{ scope.row.goods_count }}
                    </template>
                </el-table-column>

                <el-table-column prop="pay_amount" label="花费积分" width="80px"/>

                <el-table-column label="订单状态" width="100px">
                    <template slot-scope="scope">
                        <el-tag :type="orderStatusType(scope.row.status)">{{ orderStatus(scope.row.status) }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="created_at" label="下单时间" width="160">
                    <template slot-scope="scope">
                        {{ scope.row.created_at | utcFormater }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="80px">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="editHandle(scope.row)">查看</el-link>
                        <el-link type="danger" @click="deleteHandle(scope.row)"
                            v-if="btns.delete_score_order && scope.row.can_delete">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <item-form ref="itemForm" @change="changedHandle" :btns="btns" />
            <div class="pager">
                <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper"
                    :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="per_page"
                    @current-change="updateCurrentPage" @size-change="updatePageSize" />
            </div>
        </ud-card>
    </div>
</template>

<script>
import itemForm from './itemForm.vue'
import returnOrderForm from './returnOrderForm.vue';
import {
    getScoreOrderList,
    deleteScoreOrder,
    getScoreOrderById,
    exportOrders,
} from "@/api/score-order";


export default {
    components: { itemForm, returnOrderForm },
    name: 'score_order',
    props: {
        btns: { type: Object, default: {} },
    },
    data() {
        return {
            loading: false,
            items: [],
            total: 0,
            current_page: 1,
            per_page: 20,
            kw: '',
            publicLoading: false,
            downloading: false,
            dateRange: null,
            status: null,
        };
    },
    computed: {
        date_range_str: function () {
            if (!this.dateRange) {
                return "";
            }
            // var d1 = this.formtDateValue(this.dateRange[0]);
            // var d2 = this.formtDateValue(this.dateRange[1]);
            var d1 = this.dateRange[0];
            var d2 = this.dateRange[1];
            return d1 + "," + d2;
        },
    },
    watch: {
        current_page: function (newVal, oldVal) {
            this.loadData();
        },
        per_page: function (newVal, oldVal) {
            this.loadData();
        },
        dateRange: function (newValue, oldValue) {
            this.current_page = 1;
            this.loadData();
        },
        status: function (newValue, oldValue) {
            this.current_page = 1;
            this.loadData();
        },
    },
    mounted: function () {
        this.loadData();
    },
    methods: {
        deleteHandle: function (item) {
            var msg =
                "您确定要删除这个订单吗？";
            this.$confirm(msg, "删除确认").then((resp) => {
                this.loading = true;
                deleteScoreOrder(item.id).then((resp) => {
                    this.loading = false;
                    if (resp.status == 0) {
                        this.$message.success("已删除");
                        this.loadData();
                    }
                });
            });
        },

        orderStatus(i) {
            switch (i) {
                case 1:
                    return '待发货';
                case 2:
                    return '待收货';
                case 3:
                    return '已完成';
                // case 4:
                //     return '申请退货';
                // case 5:
                //     return '已退货';
                // case 6:
                //     return '驳回退货申请';
                default:
                    return '未知状态';
            }
        },
        orderStatusType(i) {
            switch (i) {
                case 1:
                    return 'warning';
                case 2:
                    return 'primary';
                case 3:
                    return 'success';
                case 4:
                    return 'danger';
                case 5:
                    return 'info';
                case 6:
                    return 'primary';
                default:
                    return 'info';
            }
        },

        updateCurrentPage: function (page) {
            this.current_page = page;
        },

        updatePageSize: function (size) {
            this.per_page = size || 10;
        },

        changedHandle: function () {
            this.loadData();
        },

        editHandle: function (item) {
            this.loadOrderData(item.id)
        },

        returnOrderHandle(item) {
            this.$refs.returnOrderForm.openDialog(item)
        },

        doSearch: function () {
            // 搜索
            this.loading = true;
            this.current_page = 1;
            this.loadData();
        },

        clearKw: function () {
            this.kw = "";
            this.loadData();
        },

        loadData: function () {
            this.loading = true;
            var _this = this
            getScoreOrderList({
                page: _this.current_page,
                per_page: _this.per_page,
                date_range: this.date_range_str,
                kw: _this.kw || "",
                status: _this.status || "",
            }).then((resp) => {
                this.loading = false;
                if (resp.code != 0) {
                    return
                }
                this.items = resp.data.result;
                this.total = resp.data.page.total_items;
            });
        },

        loadOrderData(id) {
            this.loading = true;
            getScoreOrderById(id).then((resp) => {
                this.loading = false;
                if (resp.code != 0) {
                    return
                }
                var data = resp.data
                this.$refs.itemForm.openDialog(data)
            })
        },

        downloadCsv: function () {
            var _this = this;
            this.downloading = true;
            var query = {
                date_range: this.date_range_str,
                page: _this.current_page,
                per_page: _this.per_page,
                kw: this.kw,
                status: _this.status || "",
            }
            exportOrders(query).then((res) => {
                _this.downloading = false;
                // if (res.status != 0) {
                //   return false;
                // }
                // var url = res.data
                // window.open(url, "_blank");

                const blob = new Blob([res], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });

                // 创建一个a标签
                const link = document.createElement("a");
                link.href = URL.createObjectURL(blob); // 设置文件的URL
                link.download = "订单记录.xlsx"; // 设置文件的下载名称

                // 模拟用户点击链接进行下载
                link.click();

                // 释放URL对象
                URL.revokeObjectURL(link.href);
            });
        },

    },
};
</script>

<style scoped lang="scss">
.myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 0px 0px 20px 0;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .block {
            margin-left: 10px;
        }
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .block {
            margin-right: 10px;
        }
    }
}
</style>
